<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>  
			ul>li{
				display: inline-block;
				list-style: none;
				margin: 0 20px;
				cursor: pointer;
				padding-bottom: 10px;
			} 
			
			ul>li:hover{
				color: #40AAFF;
			}
			
			ul>li.active{
				color: #40AAFF;
				border-bottom: solid 2px  #40AAFF;
			}
		</style>
	</head>
	<body>

		<div id="app">
			
			
			
			<!-- @change="changeTitles1"  -->
			<Tabs :titles="titles"   :mystr.sync="mystr"></Tabs>
			<div>
				
				<p>{{mystr}}</p>
				
				
				<!-- {{
					content1
				}} -->
			</div>
					
		</div>
		
		
		<template id="tabTemplate">
			<ul>
				
				<!-- 动态的根据数据 生成列表  class="active" -->
				<li  v-for="(title,index) in titles":class="{active:currentSelected==index}" @click="changeSelected(index)" >
					{{title}}
				</li>
				
			</ul>
		</template>
		
		<script>
			
			let Tabs = {
				template:'#tabTemplate',
				props:[
					
					'titles' ,"mystr"
				],
				data(){
					return {
						//当前选中的选项卡
						currentSelected:0,
					}
				},
				methods:{
					changeSelected(index){
						this.currentSelected = index; 
						this.$emit("change",this.currentSelected); //发生了一个时间
						//直接访问父组件的数据 不可以
						this.content1 = '动态的内容'+index;
						// this.mystr = "子组件修改父组件的值....";
						
						this.$emit("update:mystr","选中的序号"+index);
					}
				}
			}
			
			
			
			//只有跟 Vue对象的date 声明时 JSON对象
			let vm = new Vue({
				el: '#app',
				
				data: {
					mystr:'测试字符串',
					title1Selected:0,
					titles:[
						'用户管理','配置管理','角色管理','定时任务补偿'
					],
					content1:'根据选项卡动态生成，默认是用户信息',
					
				},
			
				//上面的省略的写法
				components:{
					Tabs
				},
				methods:{
					changeTitles1(index){
						this.title1Selected = index;
						
					}
				}
				

			});
		</script>

	</body>
</html>
